<template>
  <div class="wait-container">
    <div class="content">
      <div class="icon-wrapper">
        <CheckCircleFilled v-if="status === 'accept' && !statusing" class="success-icon" />
        <InfoCircleFilled v-else-if="status === 'reject' && !statusing" class="info-icon" />
        <ExclamationCircleFilled v-else class="warning-icon" />
      </div>
      <h2 class="title">
        {{ 
          !statusing
            ? (status === 'accept' 
                ? '已接受面试邀请' 
                : '已婉拒面试邀请')
            : `您已${ status === 'accept' ? '接受' : '拒绝' }该面试`
        }}
      </h2>
      <p class="description">
        {{ 
          !statusing
            ? (status === 'accept' 
                ? '请准时参加面试，祝您面试顺利！' 
                : '感谢您的回复，祝您前程似锦！')
            : '该面试邀请已经被处理过，无需重复操作。'
        }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue'
import { useRoute } from 'vue-router'
import { CheckCircleFilled, InfoCircleFilled, ExclamationCircleFilled } from '@ant-design/icons-vue'
import { getIsReject, postUpdateState } from './api/index'

const route = useRoute()
const key = route.query.key
const status = route.query.status
const statusing = ref(false)
const interviewStatus = async () => {
  try {
    // 从路由中获取key参数
    if (!key) {
      return
    }
    // 首先检查是否已经处理过
    let isRejected 
    await getIsReject(key).then((res: any) => {
      isRejected = res.data.data.is_reject
    })
    if (isRejected!==null) {
      // 如果已经处理过，设置statusing为true
      statusing.value = true
      return
    }

    // 如果未处理过，设置statusing为false并发送更新请求
    statusing.value = false
    // 发送接受/拒绝请求
    await postUpdateState({
      key: key as string,
      is_reject: status=='reject'?'1':'2'
    })

  } catch (error) {
    console.error('处理面试状态时出错：', error)
  }
}
onMounted(() => {
  
  
  interviewStatus()
})
</script>

<style lang="scss" scoped>
.wait-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(20, 24, 29);

  .content {
    text-align: center;
    padding: 2rem;

    .icon-wrapper {
      margin-bottom: 1.5rem;

      .success-icon {
        font-size: 4rem;
        color: #52c41a;
      }

      .info-icon {
        font-size: 4rem;
        color: #1890ff;
      }

      .warning-icon {
        font-size: 4rem;
        color: #ffa500;
      }
    }

    .title {
      color: #fff;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .description {
      color: rgba(255, 255, 255, 0.85);
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    .back-button {
      min-width: 120px;
    }
  }
}
</style>